<template>
  <div id="messagelist">
	  <div class="title">
		  <div class="name">消息</div>
		  <div class="clear">一键已读</div>
	  </div>
	  <div class="nav">
		  <a href="#">私信</a>
		  <a href="#">评论</a>
		  <a href="#">@我</a>
		  <a href="#">通知</a>
	  </div>
	  <ul>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
		  <li></li>
	  </ul>
  </div>
</template>

<script>
export default {
	name: "MessageList",

}
</script>

<style scoped>
#messagelist {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  overflow: auto;
  padding: 60px 0px;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px #aaa;
  background: #fff;
  z-index: 14;
}
#messagelist .title {
	height: 50px;
	line-height: 50px;
	position: relative;
}
#messagelist .title .name {
	position: absolute;
	left: 20px;
	color: #333;
	font-weight: 600;
	font-size: 20px;
}
#messagelist .title .clear {
	position: absolute;
	right: 20px;
	color: rgb(62, 62, 209);
	font-weight: 500;
	font-size: 14px;
	font-weight: 600;
}
#messagelist .nav {
	height: 30px;
	width: 250px;
	margin: 10px auto;
	border-radius: 50px;
	border: 1px solid #ccc;
	line-height: 30px;
}
#messagelist .nav a {
	display: inline-block;
	width: 25%;
	font-size: 13px;
	border-radius: 20px;
}
#messagelist .nav a:hover {
	background: #eee;
}
.active {
	background: #eee;
}
</style>